
<!-- 用户角色管理 -->
<template>
    <div style="padding: 0px; margin: 0px">
      <el-row style="background: #fff; height: 50px" class="pt-2 pb-2 pl-3 pr-3">
        <el-col :span="24">
          <div style="float: right; margin-top: 10px">
            <el-button
              type="primary"
              icon="el-icon-edit"
              plain
              style="margin-right: 10px"
              @click="allEditBatch"
              >批量修改角色</el-button
            >
          </div>
        </el-col>
      </el-row>
      <vxe-table
        ref="xTable"
        :height="heightY"
        :data="tableData"
        border
        highlight-current-row
        @current-change="handleCurrentRow"
        style="width: 100%"
      >
        <vxe-column type="checkbox" width="40" />
        <vxe-column field="userName" title="用户名称"></vxe-column>
        <vxe-column field="userNo" title="用户账号"></vxe-column>
        <vxe-column field="roleName" title="用户类型"></vxe-column>
        <vxe-column title="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              plain
              @click="handlClickuser(scope.row)"
              >修改角色</el-button
            >
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager
        background
        align="left"
        :current-page.sync="pageCurrent"
        :page-size.sync="pageSize"
        :total="dataTotal"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'NextJump',
          'Sizes',
          'FullJump',
          'Total',
        ]"
        @page-change="handleSizeChange"
      >
      </vxe-pager>
      <userPop v-if="userPopFlag" ref="userPopRef" @initData="initData"></userPop>
    </div>
  </template>
    
    <script>
  import userPop from "@/views/datacentersg/archives/documentUser/userPop.vue";
  import { getList } from "@/api/young/system/user/user.js";
  import { getUserRole } from "@/api/datacentersg/achives/documentApi";
  export default {
    components: { userPop },
    data() {
      return {
        tableData: [],
        heightY: window.innerHeight - 230 + "px",
        userPopFlag: false,
        currentRow: null,
        pageCurrent: 1,
        pageSize: 20,
        dataTotal: 0,
        multipleRow: [], //多选
        singleRow: [], //单选
      };
    },
    created() {
      this.initData();
    },
    methods: {
      handleCurrentRow(currentRow) {
        this.currentRow = currentRow.row;
      },
      // 修改角色
      handlClickuser(row) {
        this.singleRow = [];
        this.multipleRow = [];
        let records = [row];
        this.singleRow = records;
        this.userPopFlag = true;
  
        this.t_row = row
        this.$nextTick(() => {
          this.$refs.userPopRef.initUserPop(records);
        });
      },
      // 批量修改角色
      allEditBatch() {
        this.singleRow = [];
        this.multipleRow = [];
        const selectRecords = this.$refs.xTable.getCheckboxRecords();
        this.multipleRow = selectRecords;
        console.log('selectRecords', selectRecords)
        this.userPopFlag = true;
        if (selectRecords.length == 0) {
          this.$message({
            message: "请勾选人员",
            type: "warning",
          });
          return;
        }
        this.$nextTick(() => {
          this.$refs.userPopRef.initUserPop(selectRecords);
        });
      },
      initData() {
    var that = this;
    const params = {
      dataTotal: this.dataTotal,
      pageCurrent: this.pageCurrent,
      pageSize: this.pageSize,
    };
    // 并行地获取数据
    Promise.all([getList(params), getUserRole({ userId: "" })])
      .then(([listRes, roleRes]) => {
        if (listRes.result && roleRes.code === 0) {
          const { rows = [] } = listRes.resultdata;
          const { res_data = [] } = roleRes.data;
          that.pageCurrent = listRes.resultdata.page;
          that.dataTotal = listRes.resultdata.records;
  
          // 构建一个字典来存储用户的角色信息
          let roleDict = {};
          res_data.forEach(item => {
            if (roleDict[item.userId]) {
              roleDict[item.userId].push(item.roleName);
            } else {
              roleDict[item.userId] = [item.roleName];
            }
          });
  
          // 将角色信息添加到 tableData 中
          that.tableData = rows.map(e => {
            let userRoles = roleDict[e.userId]; // 获取当前用户的角色信息数组
            let tdata = { ...e };
            if (userRoles) {
              tdata['roleName'] = userRoles.join(', '); // 将角色信息以逗号隔开展示
            }
            return tdata;
          });
        }
      })
      .catch((error) => {
        // 错误处理
      });
  },
  
      handleSizeChange(val) {
        this.pageCurrent = val.currentPage;
        this.pageSize = val.pageSize;
        this.initData();
      },
    },
  };
  </script>
    
    <style scoped>
  >>> .vxe-header--column .vxe-cell--title {
    font-size: 12px;
    font-weight: normal;
    color: #909399;
  }
  >>> .vxe-cell--label {
    font-size: 12px;
  }
  </style>
    